<template>
  <div class="page">
    <s-header :name="'公示信息'" :back="'/notice-board'"></s-header>
    <div class="card-box">
      <div class="card-item">
        <div class="card-header">
          <div class="header-title">异议提交</div>
        </div>
        <van-divider />
        <div class="card-body card-body-nop">
          <van-form ref="dataFormRef" label-width="100px">
            <van-field v-model="dataForm.dissentObject" :rules="dataRule.dissentObject" required label="异议对象" placeholder="异议对象" />
            <van-field
              v-model="dataForm.dissentOriginator"
              :rules="dataRule.dissentOriginator"
              required
              label="异议发起人"
              placeholder="异议发起人"
            />
            <van-field
              v-model="dataForm.dissentIdcard"
              :rules="dataRule.dissentIdcard"
              required
              label="身份证号"
              maxlength="18"
              placeholder="身份证号"
            />
            <van-field
              v-model="dataForm.dissentPhone"
              :rules="dataRule.dissentPhone"
              required
              type="tel"
              maxlength="11"
              label="联系电话"
              placeholder="联系电话"
            />
            <van-field label="异议内容" required placeholder="" readonly />
            <div class="dissent-content">
              <van-field
                v-model="dataForm.dissentContent"
                :rules="dataRule.dissentContent"
                rows="5"
                autosize
                label=""
                type="textarea"
                maxlength="300"
                placeholder="请输入异议意见"
                show-word-limit
              />
            </div>
          </van-form>
        </div>
      </div>
    </div>

    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">取消</van-button>
      <van-button :loading="isCommit" type="button" class="cus-btn btn-primary" @click="handleToDissent">提交</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
import sHeader from '@/components/SimpleHeader'
import { useRoute, useRouter } from 'vue-router'
import { saveDissent } from '@/service/home'
import { Toast } from 'vant'
export default {
  components: { sHeader },
  setup() {
    // 全局属性
    const { $verify } = getCurrentInstance().appContext.config.globalProperties
    const route = useRoute()
    const router = useRouter()
    const dataFormRef = ref(null)
    const state = reactive({
      isCommit: false,
      dataForm: {
        applyBaseId: '',
        dissentContent: '',
        dissentIdcard: '',
        dissentObject: '',
        dissentOriginator: '',
        dissentPhone: '',
      },
      dataRule: {
        dissentContent: [{ required: true, message: '请输入异议意见', trigger: 'onBlur' }],
        dissentIdcard: [{ required: true, message: '请输入身份证号', trigger: 'onBlur', validator: $verify.validatorIDcard }],
        dissentObject: [{ required: true, message: '请输入异议对象', trigger: 'onBlur' }],
        dissentOriginator: [{ required: true, message: '请输入异议发起人', trigger: 'onBlur' }],
        dissentPhone: [{ required: true, message: '请输入联系电话', trigger: 'onBlur', validator: $verify.validatorPhone }],
      },
    })

    onMounted(async () => {
      const { applyId } = route.query
      state.dataForm.applyBaseId = applyId
    })

    const handleBack = () => {
      router.go(-1)
    }

    const handleToDissent = () => {
      dataFormRef.value.validate().then(() => {
        state.isCommit = true
        saveDissent(state.dataForm)
          .then(() => {
            Toast.success('提交成功')
            setTimeout(() => {
              router.push({ path: `/notice-board` })
            }, 500)
            state.isCommit = false
          })
          .catch(() => {
            state.isCommit = false
          })
      })
    }

    return {
      dataFormRef,
      ...toRefs(state),
      handleToDissent,
      handleBack,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .card-box {
    margin-top: 10px;
    .van-divider {
      margin: 10px 0 0;
    }
    .card-body {
      padding-bottom: 10px;
      .dissent-content {
        background-color: #ffffff;
        border-radius: 3px;
        border: solid 1px #dee1eb;
        margin: 0 12px;
      }
    }
  }
  .btn-group {
    margin: 50px 0 20px;
    position: fixed;
    bottom: 0;
    .cus-btn {
      width: 167px;
      margin-right: 10px;
      &:nth-last-child(0) {
        margin: 0;
      }
    }
  }
}
</style>
